Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support use alias in dynamic import #7485

Closed
wants to merge 2 commits into from
Closed

feat: support use alias in dynamic import #7485

wants to merge 2 commits into from

Conversation

caoxiemeihao
Copy link
Contributor

Description

The PR improved from #7339


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@caoxiemeihao
Copy link
Contributor Author

caoxiemeihao commented Mar 28, 2022

The PR just resolve vite serve phase alias adaptive. But will still be in vite build phase error.

After looking at the source code of importAnalysisBuild.ts, I found that buildImportAnalysisPlugin is executed after @rollup/plugin-dynamic-import-vars, but we need to resolve the alias before @rollup/plugin-dynamic-import-vars.
So we may need an additional plugin and put it in front of @rollup/plugin-dynamic-import-vars.

export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {

export function resolveBuildPlugins(config: ResolvedConfig): {
  pre: Plugin[]
  post: Plugin[]
} {
  const options = config.build

  return {
    pre: [
      watchPackageDataPlugin(config),
      buildHtmlPlugin(config),
      commonjsPlugin(options.commonjsOptions),
      dataURIPlugin(),
      // 🚨 We may need to deal with alias before here
      // `@rollup/plugin-dynamic-import-vars`
      dynamicImportVars(options.dynamicImportVarsOptions),
      assetImportMetaUrlPlugin(config),
      ...(options.rollupOptions.plugins
        ? (options.rollupOptions.plugins.filter(Boolean) as Plugin[])
        : [])
    ],
    post: [
      buildImportAnalysisPlugin(config),
      buildEsbuildPlugin(config),
      ...(options.minify ? [terserPlugin(config)] : []),
      ...(options.manifest ? [manifestPlugin(config)] : []),
      ...(options.ssrManifest ? [ssrManifestPlugin(config)] : []),
      buildReporterPlugin(config),
      loadFallbackPlugin()
    ]
  }
}

@patak-dev patak-dev added the p2-nice-to-have Not breaking anything but nice to have (priority) label Mar 29, 2022
@caoxiemeihao
Copy link
Contributor Author

caoxiemeihao commented Mar 31, 2022

Not sure my idea is correct, I tried to write a plugin compatible with the use of alias.
In addition to supporting alias, it should be compatible with @rollup/plugin-dynamic-import-var as far as possible.
When the plugin is more stable, I hope to integrate it into Vite.
vite-plugin-dynamic-import

@caoxiemeihao
Copy link
Contributor Author

caoxiemeihao commented Apr 1, 2022

@patak-dev Hey! 👋

I hope vite can support custom plugins sorting. For example, some plugins must run after the specified plugins.
Let's take vite-plguin-dynamic-import as an example. The plugin can only process JavaScript, so it must be run after @vitejs/plugin-vue

import { defineNuxtConfig } from 'nuxt3';
import dynamicImport from 'vite-plugin-dynamic-import';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    plugins: [
      dynamicImport(),
    ],
  },
});

I tried to reorder the plugins inside the plugin, but it didn't work!

{
  name: 'vite-plugin-dynamic-import',
  config(_config) {
    // Move "vite-plugin-dynamic-import" after "@vitejs/plugin-vue"
    // But it doesn't work
    _config.plugins = sortPlugin(_config.plugins);
    return _config;
  },
}

This may be changed through the configResolved hook, but it's "hack"!

{
  name: 'vite-plugin-dynamic-import',
  configResolved(_config) {
    _config.plugins.splice(targetIndex, 0, plugin);
  },
}

@poyoho
Copy link
Member

poyoho commented May 1, 2022

repeat with #7756

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants